<!--
 * @Descripttion: 出手鸭小程序
 * @version:1.0.1 
 * @Author: HHL
 * @Date: 2023-10-16 18:08:17
 * @LastEditTime: 2025-07-25 20:45:35
 * @LastEditors: sueRimn
-->
<template>
  <view
    class="evaluate-item-wrap"
    :class="[
      step === attrIndex ? 'h' : '',
      step >= attrIndex ? 'show' : 'open'
    ]"
    :id="'attr-item-' + attrIndex"
  >
    <view class="evaluate-item">
      <view class="question_title_wrap flex flex-align-center">
        <view class="question_title u-one-line">{{attrItem.attrName}}</view>
        <view
          class="flex-shrink0 pt-10 pb-10 pr-10"
          v-if="questionTip.showType === 2 || questionTip.showType === 3"
          @click="$emit('handleShowTips', 'question', questionTip)"
        >
          <uni-icons type="help" color="#333333" size="18" />
        </view>
      </view>

      <block v-if="attrItem.valueId && step !== attrIndex && change !== attrIndex">
        <view class="select_answer u-one-line">
          {{returnShowAswer}}
        </view>
        <view class="modify_btn font-30 color-999" @click="$emit('handleClickChange', attrIndex)">修改</view>
      </block>

      <view
        class="answer_list"
        v-if="attrItem.skuAttrValues && (step === attrIndex || change === attrIndex)"
      >
        <view
          class="question_tip"
          v-if="questionTip.showType === 1 || questionTip.showType === 2"
        >
          <text v-if="questionTip.tip.type === 'text'">{{questionTip.tip.content}}</text>
        </view>
        <view
          class="item_wrap"
          v-for="valueItem in attrItem.skuAttrValues"
          :key="valueItem.valueId"
        >
          <view
            class="item flex flex-column flex-center"
            @click="$emit('handelSelect', 'sku', false, attrItem.attrId, attrIndex, valueItem.valueId)"
            :class="attrItem.valueId === valueItem.valueId ? 'active' : ''"
          >
            <view class="flex w100 flex-center">
              <view
                class="flex-shrink0"
                v-if="answerTip[valueItem.valueId] && (answerTip[valueItem.valueId].showType === 2 || answerTip[valueItem.valueId].showType === 3)"
                @click.stop="$emit('handleShowTips', 'answer', answerTip[valueItem.valueId])"
              >
                <uni-icons type="help" color="#333333" size="18" />
              </view>
              <view class="w-min0">
                <view class="value u-one-line">{{valueItem.valueContent}}</view>
              </view>
            </view>
            
            <view
              class="tip pl-10 pr-10"
              v-if="answerTip[valueItem.valueId] && (answerTip[valueItem.valueId].showType === 1 || answerTip[valueItem.valueId].showType === 2)"
            >
              <text v-if="answerTip[valueItem.valueId].tip.type === 'text'">{{answerTip[valueItem.valueId].tip.content}}</text>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>

export default {
  props: {
    attrItem: { type: Object, default: {} },
    attrIndex: { type: Number, default: 0 },
    step: { type: Number, default: 0 },
    change: { type: Number, default: 0 },
    questionList: { type: Array, default: [] },
    answerList: { type: Array, default: [] },
  },

  computed: {
    // 返回选中答案
    returnShowAswer() {
      const { skuAttrValues, valueId } = this.attrItem
      const item = skuAttrValues.find(item => item.valueId === valueId)
      if (item) {
        return item.valueContent
      }
      return ''
    },

    attrId() {
      return this.attrItem.attrId
    }
  },

  watch: {
    attrId: {
      immediate: true,
      handler: 'matchItem',
    }
  },

  data() {
    return {
      questionTip: {},
      answerTip: {},
    }
  },

  methods: {
    // 匹配问题和答案
    matchItem() {
      this.matchQuestion()
      this.matchAnswer()
    },

    // 获取匹配的问题
    matchQuestion() {
      if (this.questionList.length === 0) {
        this.questionTip = {}
        return
      }

      const item = this.questionList.find(item => item.evaluateItemName === this.attrItem.attrName)

      if (item) {
        this.questionTip = {
          ...item,
          ...item.tipsData,
          tipsData: undefined,
        }
      } else {
        this.questionTip = {}
      }
    },

    // 匹配答案
    matchAnswer() {
      if (this.answerList.length === 0) {
        this.answerTip = {}
        return
      }

      this.attrItem.skuAttrValues.forEach(valueItem => {
        const item = this.answerList.find(item => item.evaluateValueName === valueItem.valueContent)
        if (item) {
          this.answerTip[valueItem.valueId] = {
            ...item,
            ...item.tipsData,
            tipsData: undefined,
          }
        }
      });
    },
  }
}
</script>

<style lang="scss" scoped>

.evaluate-item-wrap{
  display: none;
  width: 690rpx;
  margin: 0 auto;
  padding-bottom: 18rpx;
  &.h{
    min-height: 100%;
  }
  &.show{
    display: block;
  }
  &.open .evaluate-item{
    padding: 15rpx 32rpx 16rpx 32rpx !important;
  }
}

.evaluate-item{
  position: relative;
  background: #fff;
  border-radius: 12rpx;
  padding: 15rpx 32rpx 34rpx 32rpx;

  
  .question_title_wrap{
    padding-right: 106rpx;
  }
  .question_title{
    font-size: 30rpx;
    line-height: 70rpx;
    color: #000;
    font-weight: 500;
    
  }
  .select_answer{
    font-size: 24rpx;
    line-height: 1em;
    color: #000;
    padding-right: 106rpx;
  }

  .modify_btn{
    position: absolute;
    top: 0;
    bottom: 0;
    right: 32rpx;
    margin: auto 0;
    line-height: 50rpx;
    height: 50rpx;
    padding: 0 18rpx;
  }
}


.answer_list{
  .question_tip{
    font-size: 24rpx;
    color: #666;
    line-height: 34rpx;
  }
  .item_wrap{
    padding: 10rpx 0;
  }
  .item{
    padding: 14rpx 30rpx;
    border-radius: 12rpx;
    border: 1px solid #d5d5d5;
    min-height: 100rpx;
    &.active{
      border-color: #CEEEFA;
      background: #F6FFFF;
    }
    .value{
      font-size: 30rpx;
      color: #000;
      line-height: 38rpx;
      text-align: center;
    }
    .tip{
      font-size: 24rpx;
      color: #666;
      line-height: 34rpx;
      text-align: center;
    }
  }
}

</style> 